<template>
  <div>
    <basic-container>
      <el-row :span="24">
        <el-col :span="24">
          <div>
            <h3 style="padding-left: 15px">证书比例图</h3>
            <el-select
              size="mini"
              v-model="value"
              class="select"
              @change="change"
              placeholder="请选择"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <!-- 支部 -->
            <el-select
              size="mini"
              v-model="branchvalue"
              class="select"
              placeholder="请选择"
              @change="departmentChange"
              v-if="show"
            >
              <el-option
                v-for="item in branchOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <!-- 班级 -->
            <el-select
              size="mini"
              v-model="classValue"
              @change="classChange"
              class="select"
              placeholder="请选择"
              v-if="show1"
            >
              <el-option
                v-for="item in classOptions"
                :key="item.id"
                :label="item.className"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <!-- 年级 -->
            <el-select
              size="mini"
              v-model="yearValue"
              class="select"
              placeholder="请选择"
              v-if="show2"
              @change="yearChange"
            >
              <el-option
                v-for="item in yearOptions"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col class="height" :span="12">
          <b class="text">英语等级证书通过情况</b>
          <div id="english" class="chart"></div>
        </el-col>
        <el-col class="height" :span="12">
          <b class="text">普通话证书证书通过情况</b>
          <div id="mandarin" class="chart"></div>
        </el-col>
      </el-row>
      <el-row :span="24">
        <el-col class="height" :span="12">
          <b class="text">计算机证书通过情况</b>
          <div id="computer" class="chart"></div>
        </el-col>
        <el-col class="height" :span="12">
          <b class="text">教师资格证书通过情况</b>
          <div id="teacher" class="chart"></div>
        </el-col>
      </el-row>
    </basic-container>
  </div>
</template>

<script>
import { Chart } from "@antv/g2";
import {
  byPermission,
  studentYear,
  studentClass,
  certificate,
} from "../../api/chart/dataAnalysis";

export default {
  name: "spectaculars",
  data() {
    return {
      show: true,
      show1: false,
      show2: true,
      options: [
        {
          value: 1,
          label: "专业",
        },
        {
          value: 2,
          label: "班级",
        },
      ],
      value: "专业",
      branchOptions: [],
      branchvalue: "",
      classOptions: [],
      classValue: "",
      yearOptions: [],
      yearValue: "",
      englishCertificate: {
        data: [],
      },
      mandarinCertificate: {
        data: [],
      },
      computerCertificate: {
        data: [],
      },
      teacherCertificate: {
        data: [],
      },
      chart1: {},
      chart2: {},
      chart3: {},
      chart4: {},
    };
  },
  mounted() {
    this.chart1 = new Chart({
      container: "english",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart2 = new Chart({
      container: "mandarin",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart3 = new Chart({
      container: "computer",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
    this.chart4 = new Chart({
      container: "teacher",
      autoFit: 400,
      height: 400,
      padding: [50, 20, 20, 20],
    });
  },
  created() {
    byPermission().then((res) => {
      this.branchOptions = res.data;
      this.branchvalue = res.data[0].id;
      this.departmentChange(res.data[0].id)
    });
    studentYear().then((res) => {
      this.yearOptions = res.data;
      // this.yearValue = res.data[0];
    });
    studentClass().then((res) => {
      this.classOptions = res.data;
      // this.classValue = res.data[0].className;
    });
  },
  methods: {
    classChange(val) {
      const obj = {
        classId: val,
        isClass: true,
        isDepartment: false,
        type: 10,
      };
      certificate(obj).then((res) => {
        this.englishCertificate.data = res.data;
        this.englishCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.englishCertificate.data, this.chart1);
      });
      const obj1 = {
        classId: val,
        isClass: true,
        isDepartment: false,
        type: 20,
      };
      certificate(obj1).then((res) => {
        this.mandarinCertificate.data = res.data;
        this.mandarinCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.mandarinCertificate.data, this.chart2);
      });
      const obj2 = {
        classId: val,
        isClass: true,
        isDepartment: false,
        type: 30,
      };
      certificate(obj2).then((res) => {
        this.computerCertificate.data = res.data;
        this.computerCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.computerCertificate.data, this.chart3);
      });
      const obj3 = {
        classId: val,
        isClass: true,
        isDepartment: false,
        type: 40,
      };
      certificate(obj3).then((res) => {
        this.teacherCertificate.data = res.data;
        this.teacherCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.teacherCertificate.data, this.chart4);
      });
    },
    departmentChange(val) {
      this.yearValue = "";
      const obj = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
        type: 10,
      };
      console.log(obj);
      certificate(obj).then((res) => {
        console.log(res);
        this.englishCertificate.data = res.data;
        this.englishCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.englishCertificate.data, this.chart1);
      });
      const obj1 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
        type: 20,
      };
      certificate(obj1).then((res) => {
        this.mandarinCertificate.data = res.data;
        this.mandarinCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.mandarinCertificate.data, this.chart2);
      });
      const obj2 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
        type: 30,
      };
      certificate(obj2).then((res) => {
        this.computerCertificate.data = res.data;
        this.computerCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.computerCertificate.data, this.chart3);
      });
      const obj3 = {
        departmentId: val,
        isClass: false,
        isDepartment: true,
        type: 40,
      };
      certificate(obj3).then((res) => {
        this.teacherCertificate.data = res.data;
        this.teacherCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.teacherCertificate.data, this.chart4);
      });
    },
    yearChange(val) {
      if (this.branchvalue == null || this.branchvalue == "") {
        this.$message.error("请先选择支部");
        this.yearValue = "";
        return;
      }
      const obj = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        type: 10,
        year: val,
      };
      console.log(obj);
      certificate(obj).then((res) => {
        console.log(res.data);
        this.englishCertificate.data = res.data;
        this.englishCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.englishCertificate.data, this.chart1);
      });
      const obj1 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        type: 20,
        year: val,
      };
      certificate(obj1).then((res) => {
        this.mandarinCertificate.data = res.data;
        this.mandarinCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.mandarinCertificate.data, this.chart2);
      });
      const obj2 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        type: 30,
        year: val,
      };
      certificate(obj2).then((res) => {
        this.computerCertificate.data = res.data;
        this.computerCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.computerCertificate.data, this.chart3);
      });
      const obj3 = {
        departmentId: this.branchvalue,
        isClass: false,
        isDepartment: true,
        type: 40,
        year: val,
      };
      certificate(obj3).then((res) => {
        this.teacherCertificate.data = res.data;
        this.teacherCertificate.data.forEach((res1) => {
          res1.percent = Math.round(res1.percent * 100) / 100;
        });
        this.test1(this.teacherCertificate.data, this.chart4);
      });
    },
    change() {
      if (this.value === 1) {
        this.yearValue = "";
        this.branchvalue = "";
        this.show = true;
        this.show1 = false;
        this.show2 = true;
      } else {
        this.show1 = true;
        this.show = false;
        this.show2 = false;
      }
    },
    test1: function (obj, res) {
      const data = obj;
      let chart = res;
      chart.annotation().clear(true);
      chart.data(data);
      chart.scale("nums", {
        alias: "通过人数",
      });

      chart.axis("levelName", {
        tickLine: {
          alignTick: false,
        },
      });
      chart.axis("nums", false);

      chart.tooltip({
        showMarkers: false,
      });
      chart.legend(false);
      chart
        .interval()
        .position("levelName*nums")
        .color("levelName", [
          "#32c4e9",
          "#66dfe2",
          "#9fe5b8",
          "#fedb5b",
          "#ff9f7f",
          "#fb7194",
          "#e061ae",
          "#e68fd0",
          "#e7bcf2",
        ]);
      chart.interaction("element-active");

      // 添加文本标注
      data.forEach((item) => {
        chart.annotation().text({
          position: [item.levelName, item.nums],
          content: item.nums,
          style: {
            textAlign: "center",
          },
          offsetY: -10,
        });
      });
      chart.render();
    },
  },
};
</script>

<style scoped>
.select {
  margin: 10px;
}
.text {
  margin: 40px;
}
.height {
  height: 450px;
}
</style>